<template>
  <div class="mod-user">
    <el-tabs type="border-card">
      <el-tab-pane label="修改积分">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="updateShoppingVoucher()" class="data-form">
          <el-row >
            <el-form-item label="会员账号:">
              <el-input v-model="dataForm.name" placeholder="会员账号" clearable @change="nameChange()" style="width:300px"></el-input>
            </el-form-item>
          </el-row>

          <el-row >
            <el-form-item label="现有券数量:">
              <span>{{dataForm.existingCoupons}}</span>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="操作类型:">
              <el-radio v-model="dataForm.type" label="0" border>增加</el-radio>
              <el-radio v-model="dataForm.type" label="1" border>减少</el-radio>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="变更值:">
              <el-input v-model="dataForm.num">
                <template slot="prepend">{{dataForm.type === '0' ? '+' : '-'}}</template>
              </el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="操作说明:">
              <textarea v-model="dataForm.remark" style="width:300px; height:60px"></textarea>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item :inline="true">
              <div align="left" style="float: left">
                <el-button size="mini" type="primary" @click="updateShoppingVoucher()">修改积分</el-button>
              </div>
              <div align="right" style="margin-left: -155px">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :action="this.$http.adornUrl(`/test/importExcel2?path=${this.dataForm.prizePath}&token=${this.$cookie.get('token')}`)"
                  :on-change="onchangeFunc"
                  :multiple="false"
                  :on-success="handleSuccessAndError"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :auto-upload="false">
                  <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="mini" type="success" @click="submitUpload">上传文件</el-button>
                  <el-button  size="mini" type="primary" @click="selectTemplate()">查看模板</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传xlsx格式的excel文件，且不超过500kb</div>
                </el-upload>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-dialog
        title="模板"
        :visible.sync="dialogVisible"
        width="50%">
        <span>
          <img :src="'./static/img/excelWorkBook.png'" style="width: 100%; height: 100%"></img>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      dataForm: {
        name: '',
        type: '0',
        num: 0,
        remark: '',
        existingCoupons: 0
      },
      fileList: [],
      visible: true,
      dialogVisible: false
    }
  },
  components: {
  },
  activated () {
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    selectTemplate () {
      this.dialogVisible = true
      console.log(this.urls)
      debugger
    },
    handleSuccessAndError (res, file, fileList) {
      debugger
      if (res.code === 500) {
        this.$message.error(res.msg = '模板有误，请参照模板excel文件')
        return
      } else if (res.code === 3) {
        this.$message.error(res.msg)
        return
      } else if (res.code === 0) {
        this.$message.success('excel文件上传' + res.msg)
        return
      }
    },
    onchangeFunc (file, fileList) {
      console.log('filelist')
      debugger
      this.fileList = fileList
    },
    submitUpload () {
      console.log(this.fileList.length)
      if (this.fileList.length === 0) {
        return this.$message.error('请上传excel文件')
      }
      debugger
      if (this.fileList.length > 1) {
        return this.$message.error('只能选择一个excel文件')
      }
      this.$confirm('此操作将提交该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(_ => {
        this.$refs.upload.submit()
      })
    },
    handleRemove (file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url === file.url) {
          this.fileList.splice(i, 1)
        }
      }
      console.log(this.fileList)
      debugger
    },
      // 获取数据列表
    updateShoppingVoucher () {
      if (this.dataForm.num === 0) {
        this.message.error('交易券数量不得为0！')
      }
      this.$confirm('确认修改吗？此操作不可撤回。')
        .then(_ => {
          this.$http({
            url: this.$http.adornUrl('/member/revenueLog/modifyShoppingVoucher'),
            method: 'get',
            params: this.$http.adornParams({
              'name': this.dataForm.name,
              'integral': (this.dataForm.type === '0' ? '' : '-') + this.dataForm.num.toString(),
              'remark': this.dataForm.remark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.name = ''
              this.dataForm.num = 0
              this.dataForm.remark = ''
              this.dataForm.existingCoupons = 0
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
    },
    nameChange () {
      this.$http({
        url: this.$http.adornUrl(`/member/revenueLog/queryExistingCoupons/${this.dataForm.name}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataForm.existingCoupons = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>
<style>
  .el-upload__tip {
    margin-left: 277px;
  }
</style>
